<template>
	<view class="container">
		<view class="top_box">
			<image class="book-img" :src="bookImage" mode="widthFix"></image>
			<view class="book-info">
				<view class="book-title">
					<view class="book-name">{{bookName}}</view>
					<image class="img-1" src="/static/index1/7.png" mode="" @click="goPage('/pages/book/select?bookId='+bookId)"></image>
				</view>
				<u-line-progress 
					:percent="studyProgress" 
					:height="10" 
					:show-percent="false" 
					active-color="#FF6010"
				></u-line-progress>
				<view class="grasp-info">
					<view class="info-item">
						<view class="dot"></view>
						<view>已学：{{studyWordNum}}</view>
					</view>
					<view class="info-item">
						<view class="dot"></view>
						<view>已掌握：{{graspWordNum}}</view>
					</view>
					<view class="info-item">
						<view class="dot"></view>
						<view>总词汇：{{totalWordNum}}</view>
					</view>
					<!-- <view class="clear-box" @click.stop="clearBook">
						<image src="/static/index1/31.png" mode="widthFix"></image>
						<view>清空记录</view>
					</view> -->
				</view>
				
				<view class="book-course">
					<view class="course-info">
						<u-dropdown ref="uDropdown">
							<u-dropdown-item :title="unitName">
								<view class="slot-content">
									<scroll-view scroll-y style="width:100%;height:100%;">
										<view :class="['dropdown-item', {'active':unitId==item.unit_id}]"
											v-for="(item, index) in bookUnitList" :key="index"
											@click="dropdownClick(index)"
										>
											<text>{{item.unit_name}}</text>
											<u-icon name="checkbox-mark" color="#4BB0FF" size="30" v-if="unitId==item.unit_id"></u-icon>
										</view>
									</scroll-view>
								</view>
							</u-dropdown-item>
						</u-dropdown>
					</view>
					<view class="course-box">
						<image src="/static/index1/30.png" mode="widthFix"></image>
						课本点读
					</view>
				</view>
			</view>
		</view>
		<view class="study-num">
			<view class="img-list">
				<image v-for="item in realImgs" :src="item" ></image>
			</view>
			<view class="study-text">全国<text>100</text>W+名同学正在学习</view>
		</view>
		<view class="study-main">
			<!-- 单词 -->
			<view class="main-item" @click="goPage('/pages/study/study?bookId='+bookId+'&unitId='+unitId)">
				<image src="@/static/index1/2.png" mode="widthFix"></image>
				<view class="num-text">
					<text>{{studyWordNum}}</text>
					<text>/{{totalWordNum}}</text>
				</view>
			</view>
			<!-- 句子 -->
			<view class="main-item" @click="goPage('/pages/index/sentence/sentence?bookId='+bookId)">
				<image src="@/static/index1/3.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="study-main">
			<!-- 语法 -->
			<view class="main-item" @click="goPage(yufaUrl)">
				<image src="@/static/index1/4.png" mode="widthFix"></image>
			</view>
			<!-- 抗遗忘 -->
			<view class="main-item" @click="goPage('/pages/study/review21/review')">
				<image src="@/static/index1/5.png" mode="widthFix"></image>
				<view class="num-text">
					<text>{{reviewGraspWordNum}}</text>
					<text>/{{reviewStudyWordNum}}</text>
				</view>
			</view>
		</view>
		<view class="other-box-list">
			<view class="other-item" @click="goPage(item.page)" v-for="(item, index) in otherList" :key="index">
				<image :src="item.img" mode="widthFix"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
		<view class="model d-c-c" v-show="isShow" @click="isShow=false">
			<view class="">
				<view class="model-box">
					<view class="close" @click="isShow=false">
						<u-icon color="#fff" size="40" name="close"></u-icon>
					</view>
					<image src="/static/index1/21.png" mode="widthFix"></image>
					
					<view class="scr-code">
						二维码
					</view>
					<view class="phone-box">手机号：138xxxxxxxx</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import p1 from '@/static/index1/1.png'
	import p2 from '@/static/index1/87.png'
	import p3 from '@/static/index1/88.png'
	import p4 from '@/static/index1/89.png'
	import p5 from '@/static/index1/90.png'
	import p6 from '@/static/index1/91.png'
	import p7 from '@/static/index1/92.png'
	import p8 from '@/static/index1/93.png'
	import p9 from '@/static/index1/94.png'
	import p10 from '@/static/index1/95.png'
	export default {
		data() {
			return {
				isPad: getApp().globalData.isPad,
				imgUrl: getApp().globalData.imgUrl,
				isShow: false,//弹窗
				bookId: 0,
				bookName: '',
				bookImage: '',
				unitId: 0,
				unitName: '选择单元',
				totalWordNum: 0,
				studyWordNum: 0,
				graspWordNum: 0,
				studyProgress: 0,
				bookUnitList: [],
				reviewStudyWordNum: 0,
				reviewGraspWordNum: 0,
				imgs: [p1,p2,p3,p4,p5,p6,p7,p8,p9,p10],
				realImgs: [],
				yufaUrl: '',
				otherList: [
					{
						img:'/static/index1/19.png',
						text:'课后作业',
						page:'',
					},
					{
						img:'/static/index1/13.png',
						text:'拼写练习',
						page:'/pages/index/wordSpelling',
					},
					{
						img:'/static/index1/15.png',
						text:'复习报告',
						page:'/pages/study/review21/record',
					},
					{
						img:'/static/index1/70.png',
						text:'学习记录',
						page:'/pages/study/record',
					},
					{
						img:'/static/index1/12.png',
						text:'语境阅读',
						page:'/pages/index/contextualReading/contextualReading',
					},
					{
						img:'/static/index1/14.png',
						text:'音标学习',
						page:'',
					},
					{
						img:'/static/index1/17.png',
						text:'词汇量测试',
						page:'/pages/user/exam/word',
					},
					{
						img:'/static/index1/18.png',
						text:'联系老师',
						page:'contact',
					},
				],
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.showToast({
					title: '登录超时请重新登录',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
			let idxs = this.getRandomNumbers()
			idxs.forEach(it =>{
				this.realImgs.push(this.imgs[it])
			})
			let commonData = this.$store.state.commonData
			this.yufaUrl = commonData.study_yufa_url ? commonData.study_yufa_url : ''
			// 音标学习链接
			this.otherList[5].page = commonData.study_yinbiao_url ? commonData.study_yinbiao_url : ''
		},
		onShow() {
			this.getCurrentBook()
		},
		methods: {
			getRandomNumbers() {
				// 创建0-9的数组
				const arr = Array.from({length: 10}, (_, i) => i);
				// 洗牌算法打乱数组
				for (let i = arr.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[arr[i], arr[j]] = [arr[j], arr[i]];
				}
				// 取前5个
				return arr.slice(0, 5);
			},
			clearBook(){
				this.$u.toast('是否清空记录')
			},
			reload() {
				this.$nextTick(() => {
					this.getCurrentBook()
				})
			},
			getCurrentBook() {
				this.$u.get(this.$u.api.userBookCurrent).then((res) => {
					let book = res.data
					this.bookId = book.book_id
					this.bookName = book.book_name
					this.bookImage = book.book_img
					if (book.unit_list.length > 0) {
						let unit = book.unit_list[0]
						this.unitId = unit.unit_id
						this.unitName = unit.unit_name
						this.totalWordNum = unit.total_word_num
						this.studyWordNum = unit.study_word_num
						this.graspWordNum = unit.grasp_word_num
						this.studyProgress = Number(unit.study_progress)
						this.bookUnitList = book.unit_list
					}
					this.reviewStudyWordNum = book.review_data.study_word_num
					this.reviewGraspWordNum = book.review_data.grasp_word_num
					// 课后作业链接
					this.otherList[0].page = '/pages/index/homework/homework?bookId=' + book.book_id
					// 缓存当前学习教材
					let _currentBookId = this.$store.state.currentBookId
					let _currentUnitId = this.$store.state.currentUnitId
					if (_currentBookId > 0 && _currentBookId == this.bookId) {
						if (_currentUnitId > 0) {
							this.unitId = _currentUnitId
							this.bookUnitList.forEach((item) => {
								if (item.unit_id == _currentUnitId) {
									this.unitName = item.unit_name
								}
							})
						} else {
							uni.setStorageSync('currentUnitId', this.unitId)
						}
					} else {
						uni.setStorageSync('currentBookId', this.bookId)
						uni.setStorageSync('currentUnitId', this.unitId)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			// 单元选择
			dropdownClick(e) {
				let unit = this.bookUnitList[e]
				this.unitId = unit.unit_id
				uni.setStorageSync('currentUnitId', this.unitId)
				this.unitName = unit.unit_name
				this.totalWordNum = unit.total_word_num
				this.studyWordNum = unit.study_word_num
				this.graspWordNum = unit.grasp_word_num
				this.studyProgress = Number(unit.study_progress)
				this.$refs.uDropdown.close()
			},
			goPage(page){
				if (page) {
					if (page == 'contact') {
						this.isShow = true
					} else {
						uni.navigateTo({
							url: page
						})
					}
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		// min-width: 478px;
	}
	
	.border {
		border: 1px solid #333;
	}

	.borderRadius {
		border-radius: 10rpx;
	}

	.flex {
		display: flex;
		align-content: flex-end;
	}

	.flex-item-c {
		align-items: center;
	}

	.container {
		background: #FFFFFF;
		padding: 20rpx 30rpx 0;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}

	.top_box {
		width: 100%;
		border-radius: 20rpx;
		.flex;
		// .flex-item-c;
		background: linear-gradient( 137deg, #8DDFFF 0%, #4BB0FF 100%), rgba(255,255,255,0.2);
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,54,96,0.06);
		padding: 20rpx;
	}

	.book-img {
		width: 200rpx;
		// height: 288rpx;
		border-radius: 20rpx;
	}

	.book-info {
		margin-left: 30rpx;
		flex: 1;
	}

	.book-title {
		.flex;
		justify-content: space-between;
		color: #fff;
		align-items: center;
		font-weight: bold;
		font-size: 34rpx;
		
		.book-name{
			width: 320rpx;
			flex: 1;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.img-1 {
			width: 36rpx;
			height: 36rpx;
			border: 1rpx solid #fff;
			cursor: pointer;
			border-radius: 6rpx;
			&:hover{
				border: 2rpx solid #f00;
			}
		}
	}

	.grasp-info {
		.flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 8rpx;
		color: #fff;

		.info-item {
			font-size: 24rpx;
			width: 50%;
			margin-bottom: 8rpx;
			.flex;
			.flex-item-c;
			
			.dot {
				width: 8rpx;
				height: 8rpx;
				margin-right: 4px;
				background-color: #1cff7b;
				border-radius: 50%;
			}

			&:nth-child(2) {
				.dot {
					background-color: #ff7761;
				}
			}
			
			&:nth-child(2) {
				.dot {
					background-color: #8B2BD4;
				}
			}

		}
		
		.clear-box{
			margin-left: auto;
			border: 1rpx solid #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 136rpx;
			height: 38rpx;
			border-radius: 18rpx;
			font-size: 18rpx;
			cursor: pointer;
			image{
				width: 18rpx;
				margin-right: 6rpx;
			}
			
		}
	}

	.record {
		.flex;

		view {
			padding: 4rpx 12rpx;
			margin-right: 10rpx;
			border: 1rpx solid #fff;
			border-radius: 8rpx;
			color: #fff;
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	}
	
	.book-course{
		margin-top: 18rpx;
		.flex;
		.flex-item-c;
		justify-content: space-between;
		.course-box,.course-info{
			// height: 56rpx;
			// border-radius: 28rpx;
			// width: 194rpx;
		}
		// .course-info{
		// 	border: 1rpx solid #fff;
		// }
		.course-info{
			width: 164rpx;
		}
		.course-box{
			background: #fff;
			.flex;
			.flex-item-c;
			width: 164rpx;
			justify-content: center;
			font-size: 24rpx;
			font-weight: bold;
			color: #5bbbff;
			height: 56rpx;
			border-radius: 28rpx;
			cursor: pointer;
			cursor: pointer;
			image{
				width: 24rpx;
				margin-right: 10rpx;
			}
			&:hover{
				background-color: rgba(254,211,67,0.8);
				background-color: #5bbbff;
				border: 1rpx solid #fff;
				color: #fff;
			}
		}
		
		.slot-content {
			width: 600rpx;
			height: 600rpx;
			background-color: #FFFFFF;
			
			.dropdown-item {
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #e4e7ed;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				&:hover{
					background: rgba(75,176,255,.5);
					cursor: pointer;
				}
				&.active {
					color: #4BB0FF !important;
				}
			}
		}
	}
	
	::v-deep .u-dropdown{
		width: 164rpx;
		height: 56rpx;
		padding: 0 10rpx;
		border: 1rpx solid #fff;
		border-radius: 28rpx;
		box-sizing: border-box;
		
		.u-dropdown__menu{
			width: 100% !important;
			height: 56rpx !important;
			.u-dropdown__menu__item{
				width: 100% !important;
			}
			
			.u-flex{
				width: 100% !important;
			}
			
			.u-dropdown__menu__item__text{
				width: 120rpx;
				color: #fff !important;
				font-size: 22rpx !important;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.uicon-arrow-down::before{
				color: #fff;
			}
		}
		
		.u-dropdown__content {
			width: 600rpx !important;
			left: -200rpx !important;
			
			.u-dropdown__content__mask {
				background: transparent !important;
			}
		}
	}
	
	
	.study-num{
		margin-top:30rpx;
		.flex;
		.flex-item-c;
		.img-list{
			.flex;
			.flex-item-c;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
				&:nth-child(n+2){
					margin-left: -20rpx;
				}
			}
		}
		
		.study-text{
			margin-left: 20rpx;
			font-size: 24rpx;
			&>text{
				color: #4BB0FF;
				font-size: 36rpx;
				
			}
		}
		
	}
	
	
	.study-main{
		.flex;
		align-content: flex-start;
		flex-wrap: wrap;
		margin-top:30rpx;
		justify-content: space-around;
		.main-item{
			width: calc(50% - 40rpx);
			min-width: 260rpx;
			// height: auto;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			position: relative;
			// &:nth-child(1){
			// 	background: url('~@/static/index1/2.png') no-repeat;
			// 	background-position: center center;
			// 	background-size: contain;
			// 	margin-right: 20rpx;
			// }
			// &:nth-child(2){
			// 	background: url('~@/static/index1/3.png') no-repeat;
			// 	background-position: center center;
			// 	background-size: contain;
			// 	margin-right: 20rpx;
			// }
			
			// &:nth-child(3){
			// 	background: url('~@/static/index1/4.png') no-repeat;
			// 	background-position: center center;
			// 	background-size: contain;
			// 	margin-right: 20rpx;
			// }
			
			// &:nth-child(4){
			// 	background: url('~@/static/index1/5.png') no-repeat;
			// 	background-position: center center;
			// 	background-size: contain;
			// 	margin-right: 20rpx;
			// }
			image{
				width: 100%;
			}
			.num-text{
				// padding-top: 100rpx;
				// padding-left: 13%;
				vertical-align: sub;
				position: absolute;
				left: 4%;
				top: 50%;
				text{
					font-size: 26rpx;
					color: #f2f2f2;
					&:nth-child(2){
						font-size: 30rpx;
						color: #fff;
					}
				}
			}
		}
		
		
	}
	
	
	.other-box-list{
		margin-top: 40rpx;
		.flex;
		flex-wrap: wrap;
		padding: 0 20rpx;
		&>view{
			width: 25%;	
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
		}
		.other-item{
			font-size: 22rpx;
			// margin-right: 102rpx;
			// margin-bottom: 30rpx;
			text-align: center;
			
			// &:nth-child(4n+4) {
			// 	margin-right: 0;
			// }
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				// width: 90rpx;
				width: 33.33%;
				margin-bottom: 10rpx;
			}
		}
		
	}
	
	.model{
		position: absolute;
		z-index: 99;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		.model-box{
			z-index: 1000;
			position: relative;
			.close{
				position: absolute;
				right: 0;
				top: 0;
			}
			
			image{
				width: 528rpx;
			}
			
			.scr-code{
				width: 260rpx;
				height: 260rpx;
				border: 4rpx solid #333;
				position: absolute;
				bottom: 14.5%;
				left: 50%;
				transform:translateX(-50%);
				z-index: 2;
				border-radius: 20rpx ;
			}
			.phone-box{
				position: absolute;
				bottom: 8%;
				left: 50%;
				transform:translateX(-50%);
				z-index: 3;
				border-radius: 20rpx ;
			}
		}
		
	}
</style>